<template>
  <a-input-number
    :model-event="modelEvent"
    v-bind="objectOmit(attrs, ['update:model-value', 'model-value'])"
    :model-value="inputValue"
    focus
    :min="min ? Number(min) : undefined"
    :max="max ? Number(max) : undefined"
    :precision="precision"
    class="cloud-input-number"
    @input="emit('input', $event)"
    @update:model-value="handleChange">
    <template v-for="(_, name) in $slots" #[name]="data" :key="name">
      <slot :name="name" v-bind="data || {}"></slot>
    </template>
  </a-input-number>
</template>

<script setup lang="ts">
import { objectOmit } from '@vueuse/core'
const inputValue = ref<number>()
const props = withDefaults(
  defineProps<{
    min?: number
    max?: number
    precision?: number
    modelEvent?: 'input' | 'change'
    modelValue: string | number | undefined
  }>(),
  { precision: 0, modelEvent: 'input', min: 0 }
)

const emit = defineEmits(['update:modelValue', 'input'])
const attrs = useAttrs()

const handleChange = async (val: string | number | undefined) => {
  if (val === undefined) {
    return
  }
  inputValue.value = Number(val)
  emit('update:modelValue', Number(val))
  // await nextTick()
  // const defaultValue = (props?.min as number) ?? undefined
  // let v: string | number | undefined = val
  // if (typeof props.modelValue === 'number') {
  //   v = Number(val) || defaultValue
  // }
  // if (typeof props.modelValue === 'string') {
  //   v = String(val) || defaultValue
  // }
  // if (v === 'undefined' || Number.isNaN(v) || v == null) {
  //   v = defaultValue
  // }
  // inputValue.value = Number(v)
  // emit('update:modelValue', v)
}
// watch(
//   () => props.min,
//   async val => {
//     await nextTick()
//     if (isUndefined(val) && !isNumber(Number(val))) return
//     const value =
//       (Number(props.modelValue) < Number(val)
//         ? val
//         : Number(props.modelValue)) || Number(val)
//     inputValue.value = value
//     handleChange(value)
//   },
//   { deep: true, immediate: true }
// )
watchPostEffect(() => {
  const defaultValue = (props?.min as number) ?? undefined

  inputValue.value = Number(props.modelValue ?? defaultValue)
})
</script>

<style scoped lang="less">
.cloud-input-number {
  &.arco-input-outer-has-suffix {
    :deep(.arco-input-append) {
      font-size: 12px;
    }
    :deep(.arco-input-wrapper) {
      padding-right: 0px !important;
      .arco-input-number-step {
        .arco-input-number-step-button:not(
            .arco-input-number-step-button-disabled
          ):hover {
          background-color: var(--color-fill-3) !important;
          border-color: var(--color-fill-3) !important;
        }
      }
    }
  }
  :deep(.arco-input-wrapper) {
    .arco-input-suffix {
      position: relative;
      .arco-input-number-step {
        .arco-input-number-step-button {
          background-color: transparent;
        }
      }
    }
  }
}
</style>
